{% extends 'bootstrap/base.html' %}

{%block scripts%}
{{super()}}
    <script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
{% endblock %}

{% block styles %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
{% endblock %}
{% block problems %}
<div class="sidenav">
  <div class="row">
      <div class="col-lg">
          <table class="table table-dark table-bordered">
              <thead>
                  <tr>
                      <th scope="col">#</th>
                      <th scope="col">Problem</th>
                      <th scope="col">Grade</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <th scope="row">1</th>
                      <td>HelloWorld</td>
                      <td style="background-color: red;">N/A</td>
                  </tr>
                  <tr>
                      <th scope="row">2</th>
                      <td>Money</td>
                      <td style="background-color: red;">N/A</td>
                  </tr>
                  <tr>
                      <th scope="row">3</th>
                      <td>Minutes</td>
                      <td style="background-color: red;">N/A</td>
                  </tr>
                  <tr>
                      <th scope="row">4</th>
                      <td>Vowel Count</td>
                      <td style="background-color: red;">N/A</td>
                  </tr>
              </tbody>
          </table>
      </div>
  </div>
</div>
{% endblock %}